<template>
  <view class="content">
    <view class="app-title ac">
      <view class="fl" @click="back">
        <image class="back" src="/static/img/back.png"></image> </view
      >{{ pageOptions.pageTitle }}
      <!-- <view
        v-if="pageOptions.pageType == 'nonFacilityFailure'"
        class="fr"
        @click="show_search = true"
        >筛选</view
      > -->
    </view>

    <view
      v-if="
        pageOptions.pageType == 'nonFacilityFailure' ||
        pageOptions.pageType == 'facilityFailure' ||
        pageOptions.pageType == 'initiatingProcess' ||
        pageOptions.pageType == 'handleProcess'
      "
      class="my-work ac"
    >
      <view v-for="(item, index) in tabList" :key="index" class="fl menu ac">
        <view :class="{ on: tab == item.value }" @click="setTab(item.value)"
          ><b>{{ item.label }}</b></view
        >
        <!-- <view v-show="tab == item.value" class="num ac">{{countList[index] > 99 ? '99+' : countList[index]}}</view> -->
      </view>
      <view class="fl menu ac" @click="show_search = true">
        <view
          >筛选<image class="select" src="/static/img/select.png"></image>
        </view>
      </view>
      <view class="clearfix"></view>
    </view>

    <view class="fault-list">
      <view class="fault-list-title">
        <text>故障编号</text>
        <!-- <text>当前环节</text><text>创建部门</text> -->
        <text>线路</text>
        <text>故障地点</text>
      </view>
      <view
        v-for="(item, index) in list"
        :key="index"
        class="fault-item"
        @click="goFaultDetail(item)"
      >
        <view></view>
        <view>{{ item.code }}</view>
        <!-- <view>{{item.taskName}}</view>
				<view>{{item.orgName}}</view> -->
        <view>{{ item.lineName }}</view>
        <view>{{ item.faultLocation }}</view>
      </view>
      <!-- <button type="default">领取</button> -->
    </view>

    <ProcessSearch
      v-show="show_search"
      :type="tab"
      @closeFull="closeFull"
    ></ProcessSearch>
  </view>
</template>

<script>
import ProcessSearch from "./processSearch.vue";
export default {
  components: {
    ProcessSearch,
  },
  props: ["pageOptions"],
  data() {
    return {
      tab: 0,
      tabList: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "草稿",
          value: "3",
        },
        {
          label: "转派中",
          value: "4",
        },
        {
          label: "处理中",
          value: "1",
        },
        {
          label: "临时闭环",
          value: "5",
        },
        {
          label: "闭环",
          value: "2",
        },
      ],
      list: [],
      search: {
        code: "",
        lineId: "",
        faultLevel: "",
        devicelevel: "",
        owner: "",
        faultIssue: "",
        woState: "",
        pageSize: 15,
        pageNo: 1,
      },
      countList: [0, 0, 0, 0, 0, 0],
      show_search: false,
      flog: true,
    };
  },
  created() {
    console.log(this.pageOptions);
    // this.getAllCount();
    this.initList();
  },
  onBackPress(e) {
    uni.switchTab({
      url: "/pages/index/index",
    });
  },
  methods: {
    back() {
      uni.navigateTo({
        url: "/pages/index/index",
      });
    },
    conOnReachBottom() {
      if (!this.flog)
        return uni.showToast({
          title: "已无最新数据",
          icon: "none",
        });
      this.search.pageNo++;
      this.initList();
    },
    setTab(i) {
      if (this.tab == i) return;
      this.tab = i;
      this.search.pageNo = 1;
      this.list = [];
      this.initList();
    },
    closeFull(obj) {
      console.log(obj);
      if (obj) {
        this.search = obj;
        this.flog = true;
        this.list = [];
        // this.getAllCount();
        this.initList();
      }
      this.show_search = false;
    },
    getAllCount() {
      let params = {
        processDefinitionKey: this.search.processDefinitionKey,
      };
      this.fetch(
        "GET",
        this.$store.state.baseFaultUrl + "/task/findTaskToDoNum",
        params,
        false,
        this.$store.state.faultCLHeader
      ).then((res) => {
        if (res.success) {
          this.countList = res.data.map((item) => item.value);
        }
      });
    },
    initList() {
      this.search.woState = this.tab;

      if (this.pageOptions.pageType == "nonFacilityFailure") {
        this.search = (({
          pageSize,
          pageNo,
          lineId,
          code,
          faultLocation,
          faultLevel,
          planStartTime,
          planEndTime,
        }) => ({
          pageSize,
          pageNo,
          lineId,
          code,
          woState: this.tab,
          faultLocation,
          faultLevel,
          planStartTime,
          planEndTime,
        }))(this.search);
      }

      this.fetch(
        "GET",
        this.$store.state.baseFaultUrl +
          "/fault/" +
          this.pageOptions.listInterfaceName,
        this.search,
        true,
        this.$store.state.faultCLHeader
      ).then((res) => {
        if (res.success) {
          if (this.search.pageNo >= res.data.totalPage) {
            this.flog = false;
          }
          // for (let i = 0; i < 15; i++)
          this.list = this.list.concat(res.data.rows);
        }
      });
    },
    claimTask(taskId) {
      this.fetch(
        "POST",
        this.$store.state.baseFaultUrl + "/workFlow/task/claimTask",
        {
          actTaskId: taskId,
        },
        false,
        this.$store.state.faultCLHeader
      ).then((res) => {
        if (res.success) {
          // uni.showToast({
          // 	title: '领取成功',
          // 	icon: 'none'
          // });
        } else {
          // uni.showToast({
          // 	title: res.message,
          // 	icon: 'none'
          // });
        }
      });
    },
    goFaultDetail(item) {
      if (this.pageOptions.pageType == "initiatingProcess" && this.tab == 3) {
        uni.navigateTo({
          url: "/pages/faultClosedLoop/editFaultTicket?id=" + item.id,
        });
        return;
      }
      if (!item.taskAssignName) {
        this.claimTask(item.proInstanceId); //进入详情页面时自动领取
      }

      let params = {
        id: item.id,
        taskId: item.taskId,
        processInstanceId: item.proInstanceId,
        tab: this.tab,
      };
      uni.navigateTo({
        url:
          "/pages/faultClosedLoop/faultDetail" +
          "?params=" +
          JSON.stringify(params),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.my-work {
  background: #fff;
  margin-bottom: 16px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
}

.my-work > .menu {
  width: 12%;
  color: #3e3a39;
  line-height: 54px;
  position: relative;
}

.my-work > .menu:nth-child(1) {
  width: 11%;
}

.my-work > .menu:nth-child(2) {
  width: 10%;
}

.my-work > .menu:nth-child(3) {
  width: 14%;
}

.my-work > .menu:nth-child(4) {
  width: 14%;
}

.my-work > .menu:nth-child(5) {
  width: 16%;
}

.my-work > .menu:nth-child(6) {
  width: 10%;
}

.my-work > .menu:nth-child(7) {
  border-left: 1px solid #d7d7d7;
  width: 18%;
  margin-left: 20rpx;
}

.my-work > .menu view {
  display: inline-block;
}

.my-work > .menu > .on {
  color: #307be0;
  border-bottom: 2px solid #307be0;
}

.my-work > .menu > .num {
  position: absolute;
  top: 10px;
  right: 3%;
  background: #fa5151;
  width: 15px;
  height: 15px;
  font-size: 10px;
  border-radius: 50%;
  color: #fff;
  line-height: 14px;
}

.select {
  width: 17px;
  height: 17px;
  margin-left: 5px;
  margin-bottom: 4px;
  vertical-align: middle;
}

.fault-list {
  width: 91.5%;
  margin: 0 auto;
  background: #ffffff;
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  // padding: 0 16px 16px 16px;
  padding-bottom: 16px;
  font-size: 14px;
  margin-bottom: 16px;
  color: #3e3a39;

  .fault-list-title {
    height: 48px;
    background-color: #f1f1f1;
    // box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);
    border-radius: 6px 6px 0 0;

    text {
      text-align: center;
      line-height: 48px;
      font-size: 14px;
      font-weight: bold;
      color: black;
    }

    text:nth-of-type(1) {
      margin-left: 66rpx;
    }

    text:nth-of-type(2) {
      margin-left: 182rpx;
      margin-right: 46rpx;
    }
  }

  .fault-item {
    height: 46px;
    line-height: 46px;
    color: black;
    border-bottom: 1px solid #e0eefb;
    overflow: hidden;

    view {
      float: left;
    }

    view:nth-of-type(1) {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background-color: #7bba81;
      // background-color: #dc9c30;
      margin: 17px 9px 0 14px;
    }

    view:nth-of-type(2) {
      width: 290rpx;
    }

    view:nth-of-type(3) {
      width: 150rpx;
    }

    view:nth-of-type(4) {
      width: 140rpx;
    }
  }

  button {
    font-size: 14px;
    font-weight: bold;
    background: #fff;
    width: 78px;
    height: 30px;
    line-height: 30px;
    // border: 1px solid #8cd0ff;
    border: 1px solid #6bbaff;
    margin: 10px auto;
    color: black;
  }
}

.work-item {
  width: 91.5%;
  margin: 0 auto;
}

.work-item > .item {
  background: #ffffff;
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 0 16px 16px 16px;
  font-size: 14px;
  margin-bottom: 16px;
  color: #3e3a39;
  position: relative;
}

.work-item > .item > .name {
  margin-bottom: 10px;
  line-height: 48px;
  border-bottom: 1px solid #f1f1f1;
}

.work-item > .item > view:nth-child(2) {
  margin-bottom: 6px;
}

.work-item > .item > .item-status {
  position: absolute;
  width: 60px;
  height: 60px;
  right: 0;
  bottom: 6px;
}

.push {
  width: 60px;
  line-height: 26px;
  border-radius: 6px;
}

.work-item > .item > .name > .fr {
  display: inline-flex;
  align-items: center;
  height: 48px;
}

.f-opactiy {
  display: inline-block;
}
</style>
